<template>
  <div>
    <div>
      <el-form label-width="120px">
         <el-form-item label="视频标题">
            <div  class="flex">
                <el-input style="width:200px;" v-model="active_component.propValue.value"></el-input>
            </div>
         </el-form-item>
         <el-form-item label="文件类型">
               <el-radio-group v-model="active_component.propValue.VideoType">
                    <el-radio :label="1">本地添加</el-radio>
                    <el-radio :label="2">视频链接</el-radio>
                </el-radio-group>
                <div>
                    <Upload  v-if="active_component.propValue.VideoType==1" :text="'添加视频'" :type="'primary'" @confrim="confrim"></Upload>
                    <el-input v-else v-model="active_component.propValue.videoUrl" type="primary" size="small"></el-input>
                </div>
         </el-form-item>
         <el-form-item label="封面图展示">
            <el-radio-group  @change="change" v-model="active_component.propValue.posterType">
                    <el-radio :label="true">展示</el-radio>
                    <el-radio :label="false">不展示</el-radio>
                </el-radio-group>
         </el-form-item>
           <el-form-item label="封面图">
            <div  class="flex">
                 <Upload  :text="'上传封面图'" :type="'primary'" @confrim="confrim2"></Upload>
            </div>
         </el-form-item>
         <el-form-item label="封面图链接">
               <el-input style="width:300px;" v-model="active_component.propValue.poster"></el-input>
         </el-form-item>      
           <el-form-item label="视频宽高">
            <div  class="items-center">
                <el-input style="width:100px;" v-model="active_component.propValue.videoWidth"></el-input>
                 <i style="margin:0 5px" class="el-icon-connection"></i>
                <el-input style="width:100px;" v-model="active_component.propValue.videoHeight"></el-input>
            </div>
         </el-form-item>
             <el-form-item label="循环播放">
            <el-radio-group  @change="change" v-model="active_component.propValue.loop">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
        </el-form-item>
             <el-form-item label="自动播放">
            <el-radio-group  @change="change" v-model="active_component.propValue.autoplay">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
        </el-form-item>
         <el-form-item label="展示按钮组件">
            <el-radio-group @change="change" v-model="active_component.propValue.controls">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
        </el-form-item>
       <el-form-item label="视频">
            <div  class="flex">
                <video width="300px"
                  :initial-time='0.01'
                  ref="video"
                    muted
                    controls
                    :autoplay="active_component.propValue.autoplay"
                    :loop="active_component.propValue.loop"
                :poster="active_component.propValue.poster" :src="active_component.propValue.videoUrl"></video>
            </div>
         </el-form-item>
    
      </el-form>
    </div>
    <div class="flex-center" style="margin-top:10px;">
      <el-button size="small" type="" @click="closeTK"
        >取消</el-button
      >
       <el-button size="small" type="primary" @click="pushcanvas"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import Upload  from "../Upload/index.vue";
export default {
  props: ["componentId", "componentList","activeCompont"],
  components: {Upload},
  data() {
    return {
      name: "",
      tabIndex: 0,
      active_component: {},
    };
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  created() {
    if(this.activeCompont){
        this.active_component =this.activeCompont
    }else{
        for (let key in this.componentList) {
      if (
        this.componentList[key].isDialog &&
        this.componentList[key].propValue.name == this.componentId
      ) {
        this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
      }
    }
    }

  },

  methods: {
    deleteItem(i){
        this.active_component.propValue.footerList.splice(i,1)
    },
    change(){
        this.$refs.video.load()
    },
    addItem(){
        this.active_component.propValue.footerList.push({
            name:'导航名称',
            link:'./index.html'
        })
    },
    onremove(){
           this.active_component.propValue.img=''
    },
    loadSuccess(res){
           this.active_component.propValue.img=res.data
    },
    confrim(e){
      this.active_component.propValue.videoUrl=e
      this.change()
    },
    confrim2(e){
      this.active_component.propValue.poster=e
           this.change()
    },
    closeTK(){
        this.$emit("closeTK")
    },
    changetab(i) {
      this.active_component.propValue.tabIndex = i;
    },
    pushcanvas() {
  // console.log(this.$store.state.componentData)
      //从list中筛选出对应的jsan
    //   for (let key in this.componentList) {
    //     if (
    //       this.componentList[key].isDialog &&
    //       this.componentList[key].propValue.value == this.componentId
    //     ) {
    //       console.log(this.componentList[key]); //获取到对应组件数据
          // 进行添加缓存/vuex
        //   let canvasData = JSON.parse(localStorage.getItem("canvasData"));

        //   canvasData.push(component);
          // localStorage.setItem("canvasData", JSON.stringify(canvasData));
        //   localStorage.setItem("canvasStyle", JSON.stringify(canvasStyle));
        if(this.activeCompont){
            //  this.$store.commit('setComponentData',this.$store.state.componentData)
            this.$emit("closeTK")//关闭弹框
            this.$EventBus.$emit('loadVideo')
        }else{
            let canvasStyle = this.$store.state.canvasStyleData;
          let component = this.active_component;
          component.style.top = Number(canvasStyle.height);
          component.style.left = 0;

           this.$store.commit("addComponent", { component: component });
            canvasStyle.height = String(
              Number(canvasStyle.height) + Number(component.style.height)
            );
            this.$store.commit("setCanvasStyle", canvasStyle);
            this.$emit("closeTK")//关闭弹框
        }

    //     }
    //   }
    },
  },
};
</script>
<style>

</style>
<style lang="scss" scoped>

</style>

